<template>
    <div>
        <div>
            经度:
            <div>{{ lon }}</div>
        </div>
        <div>
            纬度:
            <div>{{ lat }}</div>
        </div>
        <div>
            高度:
            <div>{{ lat }}</div>
        </div>
    </div>
</template>

<script>
import { nextTick, onMounted, reactive, ref } from "vue";
export default {
    name: "Bottom",
    setup() {
        let lon = ref(0);
        let lat = ref(0);
        let height = ref(0);
        onMounted(() => {
            nextTick(()=>{
                let scene = viewer.scene;
                let handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
                handler.setInputAction(function (movement) {
                    let cartesian = scene.camera.pickEllipsoid(
                        movement.endPosition,
                        ellipsoid
                    );
                    let ellipsoid = scene.globe.ellipsoid;
                    if (cartesian) {
                        //能获取，显示坐标
                        var cartographic =
                            ellipsoid.cartesianToCartographic(cartesian);
                        lon.value = Cesium.Math.toDegrees(
                            cartographic.longitude
                        ).toFixed(2);
                        lat.value = Cesium.Math.toDegrees(
                            cartographic.latitude
                        ).toFixed(2);
                        height.value = Math.ceil(
                            viewer.camera.positionCartographic.height
                        );
                    } else {
                        //不能获取不显示
                        // jw = {
                        //     lon: "",
                        //     lat: "",
                        // };
                    }
                }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
            })
            
        });
        return {
            lon,
            lat,
        };
    },
};
</script>

<style lang="stylus" scoped></style>